<template>
    <div>
        <country-header></country-header>
        <cesium-containercc :newArr2="newArr2"></cesium-containercc>
        <div class="cityLeftContent">
            <countryLeft-contentOne :weatherList="weatherList" :CountryEPAdata="CountryEPAdata" :AllCountryAqi="AllCountryAqi"></countryLeft-contentOne>
            <countryLeft-contentTwo></countryLeft-contentTwo>
            <countryLeft-contentThree :QXZS="QXZS"></countryLeft-contentThree>   
        </div>
        <right-tool></right-tool>
        <common-bottom></common-bottom>
        <country-centerContent :CityEPAdatas24h="CityEPAdatas24h" :CityEPAdatas7Day="CityEPAdatas7Day" :AllCityAqis24h="AllCityAqis24h" :AllCityAqis7Day="AllCityAqis7Day" ></country-centerContent>
       
        <common-controlBtn></common-controlBtn>
    </div>
</template>
<script>
import CesiumContainercc from '../cesium/CesiumContainercc'
import CountryHeader from './components/CountryHeader'
import RightTool from '../commons/RightTool'
import CountryLeftContentOne from './components/CountryLeftContentOne'
import CountryLeftContentTwo from './components/CountryLeftContentTwo'
import CountryLeftContentThree from './components/CountryLeftContentThree'
import CountryCenterContent    from './components/CountryCenterContent'
import CommonBottom from '../commons/CommonBottom'
// import CityStationCount from './components/CityStationCount'
import CommonControlBtn from './components/CommonControlBtn'
import axios from 'axios'
export default {
    name: 'City',
    data(){
        return{
           timer:null,
           weatherList: null,
           city_code: '',
           timer: null,
           CountryEPAdata:{},
           AllCountryAqi:{},
           getStationCountData:[],
           QXZS:{},
           newArr2:[],
           StationQXDJCounts:[],
           AllCityAqis24h:[],
           AllCityAqis7Day:[],
           CityEPAdatas24h:[],
           CityEPAdatas7Day:[],
           dingwei:'dw'
        }
    },
    //  <country-stationCount :getStationCountData="getStationCountData" :StationQXDJCounts="StationQXDJCounts" :CountryEPAdata="CountryEPAdata"></country-stationCount>
    watch: {
        city_code: function(){
            this.getWeather()
            // if(this.timer){
            //     clearInterval(this.timer)
            // } else {
            //     this.timer = setInterval(()=>{
            //         this.getWeather()
            //         console.log("执行中")
            //     },30000)
            // }
        }
    },
    components: {
        CesiumContainercc,
        CountryHeader,
        RightTool,
        CountryLeftContentOne,
        CountryLeftContentTwo,
        CountryLeftContentThree,
        CommonBottom,
        CommonControlBtn,
        CountryCenterContent
        // CityStationCount
    },
     beforeDestroy(){
        if(this.timer){
          clearInterval(this.timer)
        }
    },
    beforeMount(){
        this.$store.commit("changeForq",0)
       
    },
    mounted(){
        $('div[id^="popup-fylzCounty"]').show();
        this.$comjs.onCenter(119.906064,29.573401,961893.0);
        this.$store.commit("changeForq",0);
        this.$store.commit('changeState',2);
        this.getWeather();
        this.getCityData();
        setTimeout(()=>{
            $('div[id^="popup-fylzCity"]').hide();
        },1000)
        var date = new Date();//现在时刻
        var dateIntegralPoint = new Date();//用户登录时刻的下一个整点，也可以设置成某一个固定时刻
        dateIntegralPoint.setHours(date.getHours()+1);//小时数增加1
        dateIntegralPoint.setMinutes(10);
        dateIntegralPoint.setSeconds(0);
        console.log(dateIntegralPoint);
        console.log(dateIntegralPoint-date);
        console.log((dateIntegralPoint-date)/60000);
        setTimeout(()=>{this.andUpdata()},dateIntegralPoint-date);//用户登录后的下一个整点执行。
        // this.$comjs.addF1();
        // setTimeout(this.$comjs.onCenter(120.155161,30.236581,80000.0),3000);
        // this.$comjs.onCenter(120.155161,30.236581,80000.0);
        //this.$comjs.onCenter(this.$store.state.cityX,this.$store.state.cityY,80000.0);
        
    },
    beforeMount(){
        this.$store.commit("changeForq",0)
        this.$store.commit("changeState",3)
    },
    methods: {
        changeMarker(){
            // $('div[id*="qixiangCityMarker"]').hide();
            // $('div[id*="fuyangCityMarker"]').show();

            // $('div[id*="qixiangProvinceMarker"]').hide();
            // $('div[id*="fuyangProvinceMarker"]').show();
        },
        // getCityCode(){
        //     axios.get('/_city.json').then(
        //         (res) =>{
        //             var nameCode = res.data
        //             for(var i=0;i<nameCode.length;i++){
        //                 if(nameCode[i].city_name == this.$route.params.name){
        //                     this.city_code = nameCode[i].city_code
        //                 }
        //             }
        //         }
        //     )
        // },
        getWeather(){
            axios.get('/api'+ "101210101").then((res)=>{
                    this.getWeatherInfo(res)
                }
            )
        },
        getWeatherInfo(res){ 
            this.weatherList = res.data;
        },
        getCityData(){     
            if(this.$comjs.isOnline){
                axios.get('/apis/api/FYLZ/GetFYLZCountryInfo?country='+ this.$store.state.headerCounty).then(
                    this.getCityDataInfo
                )
            }else{
                axios.get(this.$comjs.fylzCountry).then(
                    this.getCityDataInfo
                )
            }   
            
            
        },
        getCityDataInfo(res){
            if(res.data.CountryEPAdata){
                this.CountryEPAdata=res.data.CountryEPAdata;
                if(this.dingwei=='dw'){
                     this.$comjs.onCenter(res.data.CountryEPAdata.Lon,res.data.CountryEPAdata.Lat,238000.0);
                }
                this.$store.commit('changeCountyX',res.data.CountryEPAdata.Lon)
                this.$store.commit('changeCountyY',res.data.CountryEPAdata.Lat)
            }
            if(res.data.AllCountryAqi){
                this.AllCountryAqi=res.data.AllCountryAqi; 
            }
            if(res.data.StationTypeCounts){
                this.getStationCountData=res.data.StationTypeCounts;  
            }
            if(res.data.StationQXDJCounts){
                this.StationQXDJCounts=res.data.StationQXDJCounts; 
                this.$store.commit("getStationQXDJCounts",res.data.StationQXDJCounts) 
            }
            if(res.data.AllCountryAqis24h){
                this.AllCityAqis24h=res.data.AllCountryAqis24h; 
            }
            if(res.data.AllCountryAqis7Day){
                this.AllCityAqis7Day=res.data.AllCountryAqis7Day; 
            }
            if(res.data.CountryEPAdatas24h){
                this.CityEPAdatas24h=res.data.CountryEPAdatas24h;
            }
            if(res.data.CountryEPAdatas7Day){
                this.CityEPAdatas7Day=res.data.CountryEPAdatas7Day; 
            }
            if(res.data.StationEPAdatas){
                this.newArr2 = res.data.StationEPAdatas;
            }
            if(this.CountryEPAdata.City){
                localStorage.setItem('headerCity',this.CountryEPAdata.City);
            }
            if(res.data.Regions){
                this.$store.commit("changeStation",res.data.Regions)
            }
            if(res.data.QXZS){
                this.QXZS=res.data.QXZS;       
            }
            // this.$comjs.onCenter(res.data.CountryEPAdata[0].Lon,res.data.CountryEPAdata[0].Lat,238000.0);
            // this.$store.commit("changeFYLZCOUNTRY", this.CountryEPAdata)
            // this.$store.commit("changeFYLZCOUNTRYALL",this.this.AllCountryAqi)
                 
        },
        // getStationCount(){           
        //     axios.get('/FYLZCity.json').then(
        //         this.getStationCountInfo
        //     )
        // },
        // getStationCountInfo(res){
        //     this.getStationCountData=res.data.StationTypeCounts;  
        //     this.QXZS=res.data.QXZS;
        // },
        andUpdata(){
            this.dingwei='bdw';
            this.getCityData()//在整点执行的函数，在每个整点都调用该函数
            this.timer =  setInterval(()=>{this.getCityData()},60*60*1000);//一个小时执行一次，那么下一个整点，下下一个整点都会执行
        }
    }
}
</script>
<style scoped>
    .cityLeftContent{
        position: absolute;
        left: 0;
        top: 6.57vh;
        z-index: 2;
        width: 4.02rem;
        height: calc(100% - 12.3vh); 
        /* height: 87.7vh; */
        /* overflow: hidden */
    }
</style>

